<template>
	<v-dialog :show="true" @close="close">
		<view class="content">
			<template v-for="device in devices">
				<collapse class="model" :title="device | getTitle">
					<view class="uni-flex valves">
						<template v-for="valve in device.valves">
							<valve 
								class="valve" 
								color="#fff" 
								:selected="valve.selected" 
								border 
								:name="valve.name" 
								@click="onClick(valve)"
								></valve>
						</template>
						<template v-for="valve in getEmptyNumber(device.valves)">
							<view class="empty"></view>
						</template>
					</view>
				</collapse>
			</template>
			<view class="uni-flex opration">
				<button class="button" type="default" @click="back">返回</button>
				<button class="button" type="default" @click="save">保存</button>
			</view>
		</view>
	</v-dialog>
</template>

<script>
	import valve from './valve.vue'
	import vDialog from '@/components/dialog.vue'
	import collapse from '@/components/collapse.vue'
	export default {
		data(){
			return {
				// devices: []
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			getEmptyNumber(valves){
				return 4-valves.length%4;
			},
			onClick(valve){
				// valve.selected = !valve.selected
				// this.$set(valve, "selected", !valve.selected)
				this.$emit('change', valve)
			},
			save(){
				this.$emit("save", this.devices)
			},
			back(){
				this.$emit("back")
			}
		},
		filters:{
			getTitle(device){
				return `${device.name}(${device.id})`
			}
		},
		props:{
			show: Boolean,
			devices:{
				type: Array,
				required: true,
				validator: (value) => {
					return typeof value === 'object' && value.length;
				}
			}
		},
		components:{
			valve,
			vDialog,
			collapse
		}
	}
</script>

<style lang="scss" scoped>
.content{
	border-radius: 23.52rpx;
	background: #FFFFFF;
	overflow: hidden;
	
	.valves{
		justify-content: space-around;
		background: #1d776b;
		align-items: center;
		flex-wrap: wrap;
		.valve, .empty{
			margin: 11.76rpx 0;
			width: 20%;
		}
	}
	.opration{
		justify-content: space-around;
		margin: 37.64rpx 0;
		.button{
			font-size: 25.88rpx;
			font-weight: 400;
			letter-spacing: 0.2em;
			background: #1d776b;
			color: #FFFFFF;
			width: 188.23rpx;
			height: 56.47rpx;
		}
	}
}
</style>
